<template>
  <el-dialog
    :visible="visible"
    :title="$t('batch.emv_configuration')"
    width="60%"
    @close="handleClose"
  >
    <div class="container">
      <el-form
        :label-position="'right'"
        size='small'
        @submit.prevent.native
        ref="emvConfigForm"
        :model="dataForm"
        :rules="rules"
        label-width="150px"
      >
        <el-form-item :label="$t('batch.system_parameter.param1') + ':'">
          <el-col :span="9">
            <el-input
              v-model="dataForm.paramKey1"
              style="width: 100%;"
              size="small"
              maxlength='90'
              @blur="bulrRow(1)"
              show-word-limit
              clearable
              :placeholder="$t('batch.system_parameter.param_key')"
            />
          </el-col>
          <el-col style='padding: 1px' :span="1" ></el-col>
          <el-col :span="9">
            <el-input
              v-model="dataForm.paramValue1"
              style="width: 100%;"
              size="small"
              @blur="bulrRow(1)"
              show-word-limit
              maxlength='32'
              clearable
              :placeholder="$t('batch.system_parameter.param_value')"
            />
          </el-col>
          <el-col align="center" :span="2" v-show='!param2Visible'>
            <el-button size='small' type="primary" icon="el-icon-plus" @click="addRow(2)"></el-button>
          </el-col>
        </el-form-item>
        <el-form-item v-show='param2Visible' :label="$t('batch.system_parameter.param2') + ':'">
          <el-col :span="9">
            <el-input
              v-model="dataForm.paramKey2"
              @blur="bulrRow(2)"
              size="small"
              style="width: 100%;"
              maxlength='90'
              show-word-limit
              clearable
              :placeholder="$t('batch.system_parameter.param_key')"
            />
          </el-col>
          <el-col style='padding: 1px' :span="1" ></el-col>
          <el-col :span="9">
            <el-input
              v-model="dataForm.paramValue2"
              style="width: 100%;"
              size="small"
              @blur="bulrRow(2)"
              show-word-limit
              maxlength='32'
              clearable
              :placeholder="$t('batch.system_parameter.param_value')"
            />
          </el-col>
            <el-col align="center" :span="2" v-show='!param3Visible'>
              <el-button  size='small'  type="primary" icon="el-icon-plus" @click="addRow(3)"></el-button>
            </el-col>
          <el-col :span="1" v-show='!param3Visible' >
            <el-button  size='small'  type="danger" icon="el-icon-minus" @click="deleteRow(2)"></el-button>
          </el-col>
        </el-form-item>
        <el-form-item v-show='param3Visible' :label="$t('batch.system_parameter.param3') + ':'">
          <el-col :span="9">
            <el-input
              v-model="dataForm.paramKey3"
              size="small"
              @blur="bulrRow(3)"
              style="width: 100%;"
              maxlength='90'
              show-word-limit
              clearable
              :placeholder="$t('batch.system_parameter.param_key')"
            />
          </el-col>
          <el-col style='padding: 1px' :span="1" ></el-col>
          <el-col :span="9">
            <el-input
              v-model="dataForm.paramValue3"
              size="small"
              style="width: 100%;"
              @blur="bulrRow(3)"
              show-word-limit
              maxlength='32'
              clearable
              :placeholder="$t('batch.system_parameter.param_value')"
            />
          </el-col>
          <el-col align="center" :span="2" v-show='!param4Visible' >
            <el-button size='small' type="danger" icon="el-icon-minus" @click="deleteRow(3)"></el-button>
          </el-col>
        </el-form-item>
      </el-form>
    </div>
    <template #footer>
      <span class="dialog-footer">
        <el-button size="small" @click="handleClose()">{{ $t('page.cancel') }}</el-button>
        <el-button size="small" type="primary" :loading="confirmLoading" @click="doOperation()">{{ $t('common.confirm') }}</el-button>
      </span>
  </template>
  </el-dialog>
</template>

<script>
import { addCmd } from '@/api/batch'
// TODO:　这个要确认下是做什么的
// import da from 'element-ui/src/locale/lang/da'
export default {
  computed: {
    da() {
      return da
    }
  },
  props: {
    visible: Boolean
  },
  data() {
    return {
      batchId: '',
      confirmLoading: false,
      param2Visible: false,
      param3Visible: false,
      param4Visible: false,
      param5Visible: false,
      dataForm: {
        paramKey1: '',
        paramValue1: '',
        paramKey2: '',
        paramValue2: '',
        paramKey3: '',
        paramValue3: '',
        paramKey4: '',
        paramValue4: '',
        paramKey5: '',
        paramValue5: ''
      },
      rules: {

      }
    }
  },
  mounted() {
    this.batchId = this.$route.params.batchId
  },
  methods: {
    addRow(index) {
      if (index === 2) {
        this.param2Visible = true
      }
      if (index === 3) {
        this.param3Visible = true
      }
      if (index === 4) {
        this.param4Visible = true
      }
      if (index === 5) {
        this.param5Visible = true
      }
    },
    deleteRow(index) {
      if (index === 2) {
        this.param2Visible = false
        this.dataForm.paramKey2 = ''
        this.dataForm.paramValue2 = ''
      }
      if (index === 3) {
        this.param3Visible = false
        this.dataForm.paramKey3 = ''
        this.dataForm.paramValue3 = ''
      }
      if (index === 4) {
        this.param4Visible = false
        this.dataForm.paramKey4 = ''
        this.dataForm.paramValue4 = ''
      }
      if (index === 5) {
        this.param5Visible = false
        this.dataForm.paramKey5 = ''
        this.dataForm.paramValue5 = ''
      }
    },
    bulrRow(index) {
      if (index === 1) {
        this.dataForm.paramKey1 = this.dataForm.paramKey1.trim()
        this.dataForm.paramValue1 = this.dataForm.paramValue1.trim()
      }
      if (index === 2) {
        this.dataForm.paramKey2 = this.dataForm.paramKey2.trim()
        this.dataForm.paramValue2 = this.dataForm.paramValue2.trim()
      }
      if (index === 3) {
        this.dataForm.paramKey3 = this.dataForm.paramKey3.trim()
        this.dataForm.paramValue3 = this.dataForm.paramValue3.trim()
      }
      if (index === 4) {
        this.dataForm.paramKey4 = this.dataForm.paramKey4.trim()
        this.dataForm.paramValue4 = this.dataForm.paramValue4.trim()
      }
      if (index === 5) {
        this.dataForm.paramKey5 = this.dataForm.paramKey5.trim()
        this.dataForm.paramValue5 = this.dataForm.paramValue5.trim()
      }
    },
    handleClose() {
      this.dataForm.paramKey1 = ''
      this.dataForm.paramValue1 = ''
      this.dataForm.paramKey2 = ''
      this.dataForm.paramValue2 = ''
      this.dataForm.paramKey3 = ''
      this.dataForm.paramValue3 = ''
      this.dataForm.paramKey4 = ''
      this.dataForm.paramValue4 = ''
      this.dataForm.paramKey5 = ''
      this.dataForm.paramValue5 = ''
      this.param2Visible = false
      this.param3Visible = false
      this.param4Visible = false
      this.param5Visible = false
      this.$emit('close')
      this.confirmLoading = false
    },
    doOperation() {
      var errorMessage = ': ' + this.$t('batch.system_parameter.param_key') + this.$t('batch.system_parameter.or') + this.$t('batch.system_parameter.param_value') + ' ' + this.$t('common.input_filed_not_null')
      if (this.dataForm.paramKey1 === '' || this.dataForm.paramValue1 === '') {
        this.$message.error(this.$t('batch.system_parameter.param1') + errorMessage)
        return
      }
      if (this.param2Visible && (this.dataForm.paramKey2 === '' || this.dataForm.paramValue2 === '')) {
        this.$message.error(this.$t('batch.system_parameter.param2') + errorMessage)
        return
      }
      if (this.param3Visible && (this.dataForm.paramKey3 === '' || this.dataForm.paramValue3 === '')) {
        this.$message.error(this.$t('batch.system_parameter.param3') + errorMessage)
        return
      }
      if (this.param4Visible && (this.dataForm.paramKey4 === '' || this.dataForm.paramValue4 === '')) {
        this.$message.error(this.$t('batch.system_parameter.param4') + errorMessage)
        return
      }
      if (this.param5Visible && (this.dataForm.paramKey5 === '' || this.dataForm.paramValue5 === '')) {
        this.$message.error(this.$t('batch.system_parameter.param5') + errorMessage)
        return
      }
      console.log('dataForm:', JSON.stringify(this.dataForm))
      const params = {
        cmdTypeCode: 'D6',
        cmdSysParamDto: this.dataForm
      }
      this.confirmLoading = true
      addCmd(this.batchId, params).then(() => {
        this.$message({
          message: this.$t('batch.send_command_success'),
          type: 'success',
          onClose: () => {
            this.handleClose()
          }
        })
      }).catch((e) => {
        this.confirmLoading = false
        this.$confirmError(e)
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.header {
  height: 86px;
}

</style>
